<template>
  <view style="background: url('https://pic.moresu.com/FqKasnNF1kxRtuAwLXlHlMJz6OKp') no-repeat;background-size: contain;">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
      <f-navbar title="个人中心" fontColor="#000" bgColor="#fff" :scrollTop="scrollTop" navbarType='5'></f-navbar>
	  <div class="user-page" :style="{'padding-top':systemInfo.navBarH+'px'}">
		  <div class="user-info">
			  <div class="user-img" @click="onJump('/pagesUser/user/myInfo')">
				  <img :src="storeUserInfo.userHeader" class="img"/>
			  </div>
			  <div class="user-text" @click="onJump('/pagesUser/user/myInfo')">
				 <div class="big-text" v-if="storeUserInfo.userId" >
				  {{storeUserInfo.realName != '' ? storeUserInfo.realName : '请设置姓名'}}
				    
					  <div class="msg-div" @click.stop="onJump('/pagesUser/notice/noticeList')">
						  <div class="num-div" v-if="msgNum > 0" style="z-index: 10;">{{msgNum <= 99 ? msgNum : '99+'}}</div>
						  <image src="https://pic.moresu.com/FjF0lLqEwMA0BLNOYd9kV-7yytcd" style="width:56rpx;height:53rpx"></image>
					  </div>
					  <div style="float:right;margin-right:20rpx" @click.stop="showKF" v-if="kfinfo">
						  <image src="https://pic.moresu.com/FsDeRoRR6GqIsuxpDyEare_lc558" style="width:63rpx;height:66rpx"></image>
					  </div>
				  </div>
				 <div class="big-text" v-else>登录/注册</div>
				  <div class="ty-div" v-if="!storeUserInfo.userId" style="width:200rpx">
					  <img src="https://pic.moresu.com/FioESrXwHIznCxWvomzGkrL4Y3Or" style="width:24rpx;height:24rpx;"/>
					  <span style="padding-left:10rpx;">体验更多服务</span>
				  </div>
				  <div v-if="storeUserInfo.mobile != ''" class="small-text">{{storeUserInfo.mobile}}</div>
				  <div v-if="storeUserInfo.userId" class="small-text" @click.stop="onJump('/pagesIntegral/myIntegral')">
					  账户积分：<span style="font-weight: bold;color:#ff9d02;text-decoration: underline;font-size: 12px;">{{storeUserInfo.balance}}</span>
				  </div>
				 
			  </div>
		  </div>
		  <div class="user-seller-div" ><!--v-if="storeUserInfo.permissions && storeUserInfo.permissions.length > 0"-->
			  <div class="seller-top">
				  <div class="seller-title">我的询价</div>
				  <div style="color:#002671;font-size:24rpx;" @click="onJump('/pagesUser/order/myInquiryList?inquiryState=all')">
					  <div style="display: inline-block;vertical-align: middle;">查看全部 </div>
					  <div style="display: inline-block;vertical-align: middle;">
						  <u-icon name="arrow-right" color="#002671"></u-icon>
					  </div>
				  </div>
			  </div>
			  <div class="seller-row">
				  <div class="seller-col" @click="onJump('/pagesUser/order/myInquiryList?inquiryState=10')" style="width:25%;">
					  <div class="img-div">
						  <img src="https://pic.moresu.com/FqIhcAALv1snxc0cedHu6BZsS0A_" style="width:46rpx;height:44rpx"/>
					  </div>
					 <div class="text">待报价</div>
					  <div class="label" v-if="inquiryWaitPriceNum > 0">{{inquiryWaitPriceNum}}</div>
				  </div>
				  <div class="seller-col" @click="onJump('/pagesUser/order/myInquiryList?inquiryState=20')" style="width:25%;">
					  <div class="img-div">
						  <img src="https://pic.moresu.com/FsIgnYNoxdc_JSsbU3r31KYbu8Bm" style="width:40rpx;height:44rpx"/>
					  </div>
					  <div class="text">报价中</div>
					  <div class="label" v-if="quotationNum > 0">{{quotationNum}}</div>
				  </div>
				  <div class="seller-col" @click="onJump('/pagesUser/order/myInquiryList?inquiryState=30')" style="width:25%;">
					  <div class="img-div">
						  <img src="https://pic.moresu.com/FvbljG_2bT1yxpPCJVDDLctUXA_e" style="width:39rpx;height:44rpx"/>
					  </div>
					  <div class="text">已成交</div>
				  </div>
				  <div class="seller-col"  @click="onJump('/pagesUser/order/myInquiryList?inquiryState=40')" style="width:25%;">
					  <div class="img-div">
						  <img src="https://pic.moresu.com/Ft7aiGStzgKsrKmYJYJALvr3SYly" style="width:44rpx;height:44rpx"/>
					  </div>
					  <div class="text">已关闭</div>
				  </div>
			  </div>		 
		  </div>
		  
		  <div class="user-seller-div" >
				  <div class="seller-top">
					  <div class="seller-title">我的订单</div>
					  <div style="color:#002671;font-size:24rpx;" @click="onJump('/pagesUser/order/orderList')">
						  <div style="display: inline-block;vertical-align: middle;">查看全部 </div>
						  <div style="display: inline-block;vertical-align: middle;">
							  <u-icon name="arrow-right" color="#002671"></u-icon>
						  </div>
					  </div>
				  </div>
				  <div class="seller-row">
					  <div class="seller-col" @click="onJump('/pagesUser/order/orderList?orderState=20')" style="width:25%;">
						  <div class="img-div">
							  <img src="https://pic.moresu.com/Fkn2fHQtr9ItJP0sgdQ2moGA_nr2" style="width:46rpx;height:44rpx"/>
						  </div>
						 <div class="text">待付款</div>
					  </div>
					  <div class="seller-col" @click="onJump('/pagesUser/order/orderList?orderState=30')" style="width:25%;">
						  <div class="img-div">
							  <img src="https://pic.moresu.com/FoDshXnxckdR9fy5mtqwR6X5BrUs" style="width:58rpx;height:44rpx"/>
						  </div>
						  <div class="text">待发货</div>
						  <div class="label" v-if="quotationNum > 0">{{quotationNum}}</div>
					  </div>
					  <div class="seller-col" @click="onJump('/pagesUser/order/orderList?orderState=40')" style="width:25%;">
						  <div class="img-div">
							  <img src="https://pic.moresu.com/FnyPcpODBCHegC8jX9IrEH2-R30U" style="width:54rpx;height:44rpx"/>
						  </div>
						  <div class="text">待收货</div>
					  </div>
					  <div class="seller-col"  @click="onJump('/pagesUser/order/orderList?orderState=60')" style="width:25%;">
						  <div class="img-div">
							  <img src="https://pic.moresu.com/FmwkVxzAll-9L0MlmTF8gCSOnaC0" style="width:44rpx;height:44rpx"/>
						  </div>
						  <div class="text">已完成</div>
					  </div>
				  </div>
		  			  
		  </div>
		  
		  <div class="user-seller-div" >
			  <div class="seller-top">
				  <div class="seller-title">常用功能</div>
			  </div>
			  <div class="seller-row cy-row">
				  <div class="seller-col" @click="onJump('/pagesUser/user/invoiceList')" >
					  <div class="img-div">
						  <img src="https://pic.moresu.com/FhvvUwHl4CGM3L2kjfH_CkAAisLm" style="width:39rpx;height:46rpx"/>
					  </div>
					 <div class="text" style="font-size:22rpx">发票管理</div>
				  </div>
				  <div class="seller-col" @click="onJump('/pagesUser/user/arrangeList')" >
					  <div class="img-div">
						  <img src="https://pic.moresu.com/1724136779289 " style="width:47rpx;height:46rpx"/>
					  </div>
					 <div class="text" style="font-size:22rpx">排货管理</div>
				  </div>
				  <div class="seller-col" @click="onJump('/pagesUser/user/myAttention')" >
					  <div class="img-div">
						  <img src="https://pic.moresu.com/FrE1H5Gu6tSC7R-BSOZviqb-JyG2" style="width:46rpx;height:44rpx"/>
					  </div>
					  <div class="text" style="font-size:22rpx">我的关注</div>
				  </div>
				  <div class="seller-col" @click="onJump('/pagesUser/user/myAddressList')">
					  <div class="img-div">
						  <img src="https://pic.moresu.com/Fn7RdnFEM4hnk-XQFlrwYFzohtzb" style="width:31rpx;height:45rpx"/>
					  </div>
					  <div class="text" style="font-size:22rpx">我的地址</div>
				  </div>
				  <div class="seller-col"  @click="onJump('/pagesUser/user/myAuthenticationList')" id="userAuth">
					  <div class="img-div">
						  <img src="https://pic.moresu.com/Fs8W9obL_OKsPuKtni6qBp2oZt3r" style="width:39rpx;height:40rpx"/>
					  </div>
					  <div class="text" style="font-size:22rpx">我的认证</div>
				  </div>
				  <div class="seller-col"  @click="onJump('/pagesUser/user/subAccount')">
					  <div class="img-div">
						  <img src="https://pic.moresu.com/FnqxH7-SzieS02r35OQXkOq-vKq-" style="width:46rpx;height:38rpx"/>
					  </div>
					  <div class="text" style="font-size:22rpx">子账户</div>
				  </div>
				  <div class="seller-col"  @click="onJump('/pagesIntegral/integral')">
					  <div class="img-div">
						  <img src="https://pic.moresu.com/FrKXfXcWTkjArrOrs9bfxiUTnuYr" style="width:45rpx;height:40rpx"/>
					  </div>
					  <div class="text" style="font-size:22rpx">积分商城</div>
				  </div>
				  <div class="seller-col"  @click="onJump('/pagesCommon/myCoupon')">
					  <div class="img-div">
						  <img src="https://pic.moresu.com/Fg02aHtRnrldgD2g-EE1dA2OOWgk" style="width:56rpx;height:44rpx"/>
					  </div>
					  <div class="text" style="font-size:22rpx">我的优惠券</div>
				  </div>
			  </div>	  
		  </div>
		  
		  <div class="user-seller-div" v-if="storeUserInfo.isSellerAuth == 1"><!--v-if="storeUserInfo.permissions && storeUserInfo.permissions.length > 0"-->
			  <div class="seller-top">
				  <div class="seller-title">我的报价</div>
				  <!-- <div class="seller-lable">
					  <img src="https://pic.moresu.com/Fgq6vb8kXHG5Ag1NWR-hPEb6cte8" style="width:20rpx;height:20rpx;"/><span style="padding-left:8rpx">入驻成为商家参与报价</span>
				  </div> -->
				  <div style="color:#002671;font-size:24rpx;" @click="showChooseDP">
					  <div style="display: inline-block;vertical-align: middle;">{{storeUserInfo.storeName}}</div>
					  <div style="display: inline-block;vertical-align: middle;">
						  <u-icon name="arrow-right" color="#002671"></u-icon>
					  </div>						  
				  </div>
			  </div>
			  <div class="seller-row">
				  <div class="seller-col" @click="onSheller('/pagesUser/business/businessInfo','shop')" ><!--v-if="storeUserInfo.permissions.indexOf('shop') != -1"-->
					  <div class="img-div">
						   <img src="https://pic.moresu.com/FtDQ-WnYkVL5NYlLe_F8Ptf4LJ8-" class="img" style="width:46rpx;height:43rpx"/>
					  </div>
					  <div class="text">基本设置</div>
				  </div>
				  <div class="seller-col" @click="onSheller('/pagesUser/business/goodsList','goods')" ><!--v-if="storeUserInfo.permissions.indexOf('quotation') != -1"-->
					  <div class="img-div">
						   <img src="https://pic.moresu.com/FrLpF5APngAn5N2IpSNKBZWRPYdR" class="img" style="width:47rpx;height:42rpx"/>
					  </div>
					  <div class="text">商品信息</div>
				  </div>
				  <div class="seller-col" @click="onSheller('/pagesUser/business/quotationList','quotation')" ><!--v-if="storeUserInfo.permissions.indexOf('goods') != -1"-->
					  <div class="img-div">
						   <img src="https://pic.moresu.com/FtVFmLCEdUDD00ZWcAu3eBJQnMDo" class="img" style="width:45rpx;height:45rpx"/>
					  </div>
					  <div class="text">我的报价</div>
				  </div>
				  <div class="seller-col"  @click="onSheller('/pagesUser/business/businessOrderList','order')" id="storeOrder"><!--v-if="storeUserInfo.permissions.indexOf('order') != -1"-->
					 <div class="img-div">
						   <img src="https://pic.moresu.com/Fv7E47GC7SbTisWk3KujIfJuJr-B" class="img" style="width:39rpx;height:44rpx"/>
					 </div>
					  <div class="text">成交订单</div>
				  </div>
			  </div>
			  <div class="seller-row">
				  <div class="seller-col"  @click="onSheller('/pagesUser/business/staffList','user')" ><!--v-if="storeUserInfo.permissions.indexOf('user') != -1"-->
					  <div class="img-div">
						   <img src="https://pic.moresu.com/Fv7E47GC7SbTisWk3KujIfJuJr-B" class="img" style="width:51rpx;height:45rpx"/>
					  </div>
					  <div class="text">员工管理</div>
				  </div>
				  <div class="seller-col"  @click="onSheller('/pagesUser/business/serviceCharge','serviceCharge')" ><!--v-if="storeUserInfo.permissions.indexOf('user') != -1"-->
					  <div class="img-div">
						   <img src="https://pic.moresu.com/FtCjUCwN17PICnMgms9SF8tNum9O" class="img" style="width:51rpx;height:45rpx"/>
					  </div>
					  <div class="text">服务费</div>
				  </div>
				  <div class="seller-col"  @click="onSheller('/pagesUser/business/goodsDocumentFile','goodsDocumentFile')" ><!--v-if="storeUserInfo.permissions.indexOf('user') != -1"-->
					  <div class="img-div">
						   <img src="https://pic.moresu.com/1729497799137.png" class="img" style="width:44rpx;height:44rpx"/>
					  </div>
					  <div class="text">产品资料库</div>
				  </div>
			  </div>
		  </div>
		  <!--没有入驻-->
		  <div v-else class="share-div" @click="onJump('/pagesUser/business/businessCheckIn')" id="userToStore">	 
			  <image src="https://pic.moresu.com/FiKODi2v-eIS9jmZ-qaAgMtUQYl0" style="width:100%" mode="widthFix"></image>
		  </div>
		  
		 <!-- <div class="share-div" @click="onJump('/pagesShare/index/index')">
			  <div class="share-btn">邀请好友</div>
			  <image src="https://pic.moresu.com/Fslm_Y4Eyu5Bl4yukO_M5nujjsfN" style="width:100%" mode="widthFix"></image>
		  </div> -->
		  
		  <div class="about-div">
			  <u-cell-group >
			    <u-cell title="在线咨询" :isLink="true" icon="https://pic.moresu.com/FhN1ev-Vizvd5lMVKcpchtVtCHJ_">
					<div  slot="value" style="width:160rpx">
						<!-- #ifdef MP -->
						<u-button text="人工客服" plain openType="contact"  size="small" shape="circle" :customStyle="{'color':'#070D14','border':'1px solid #B8B8B8'}"></u-button>
					    <!--#endif -->
						<!-- #ifdef H5 | APP-PLUS -->
						 <u-button text="人工客服" plain  size="small" shape="circle" :customStyle="{'color':'#070D14','border':'1px solid #B8B8B8'}" @click="callPhone"></u-button>
						<!--#endif -->
					</div>
				</u-cell>
			  	<u-cell title="关于摩塑网" :isLink="true" @click="onJump('/pagesUser/user/about','no')" icon="https://pic.moresu.com/Fs7jcGNyOO05luSxQELs_V4t1vVa"></u-cell>
			  </u-cell-group>
		  </div>
		  <div class="index-block">
		  	<div class="indexPage-block-title" @click="toNewPage('/pagesCommon/goodsList')">
		  		<div class="price-left">
		  			<img src="https://pic.moresu.com/FvlyHJj2CyXh0DqgwpufXu6Jdqed" style="height: 32rpx;width:32rpx;">
		  			<span style="padding-left:20rpx">今日力推</span> 
		  		</div>
		  		
		  		<div class="more-span">
		  			<span>查看更多</span>
		  			<img src="https://pic.moresu.com/Fhw8DXyIA4AxK9Bdd9OmKNo8fm1n" style="width: 56rpx;height:56rpx">
		  		</div>
		  	</div>
		  	
		  	<div class="goods-list" style="max-height:580rpx;overflow: auto;">
		  		<div class="goods-item" v-for="item in goodsList" :key="item.goodsId"  @click="toInfo(item)">
		  			<div class="goods-top">
		  				<div class="goods-name">{{item.goodsName}}</div>
		  				<div class="goods-price">￥{{item.price}}</div>
		  			</div>
		  			<div class="goods-attar">
		  				<span>库存：{{item.stock}}</span>
		  				<span style="padding-left:30rpx">交货地：{{item.area}}</span>
		  			</div>
		  		</div>	
		  	</div>		
		  </div>
		  <div style="text-align: center;padding-top:40rpx;color:#aaa;font-size: 28rpx;" @click="callPhone1">客服电话：400-675-8606</div>
	  </div>
    <f-tabbar></f-tabbar>
	<storeChoose ref="storeChoose" @chooseItem="changeStore"></storeChoose>	
	
	<driver-page ref="driverPage"></driver-page>
	<!--客户经理-->
	<u-popup :show="show"  @close="show = false"  mode="center" bgColor="transparent">
		<div class="kfdiv">
			<div class="kfrwm">
				<img :src="kfinfo.serviceCode" style="width:348rpx;height:348rpx"/>
			</div>
			<div class="kfinfo">
				<div>
					<span class="label">经理姓名：</span>
					<span class="text">{{kfinfo.adminRealname}}</span>
				</div>
				<div style="margin-top:10rpx">
					<span class="label">联系电话：</span>
					<span class="text">{{kfinfo.adminMobile}}</span>
					<div style="display: inline-block;margin-left:30rpx;vertical-align: middle;" @click="callKF()">
						<img src="https://pic.moresu.com/FphCz0wkPiiRQb8bDOtb8NpM51GY" style="width: 60rpx;height:60rpx;"/>
					</div>
				</div>
			</div>
		</div>
	</u-popup>
  </view>

</template>

<script>
  import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  import fNavbar from '@/components/module/f-navbar/f-navbar';
  import storeChoose from '@/components/module/storeChoose';
  import store from '@/store';
  import {dataStatistics,setDefaultStore,customerService,getGuideDataAPI,pageSeo,commonData,pcGoodsList} from '@/config/api.js'
  import driverPage from '@/components/driver-page/driver-page';
  import { mapState, mapMutations } from 'vuex';
  export default {
    components: {
      fTabbar,fNavbar,storeChoose,driverPage
    },
	data() {
		return {
	       storeUserInfo:{},
		   msgNum:0,
		   inquiryWaitPriceNum:0,
		   inquiryPriceIngNum:0,
		   scrollTop:0,
		   systemInfo:{
		       statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
		       // #ifdef MP-ALIPAY
		       navBarH: uni.getSystemInfoSync().statusBarHeight + uni.getSystemInfoSync().titleBarHeight, //菜单栏总高度--单位px
		       titleBarHeight: uni.getSystemInfoSync().titleBarHeight, //标题栏高度--单位px
		       // #endif
		       // #ifndef MP-ALIPAY
		       navBarH: uni.getSystemInfoSync().statusBarHeight + 44, //菜单栏总高度--单位px
		       titleBarHeight: 44, //标题栏高度--单位px
		       // #endif
		   },
		   show:false,
		   kfinfo:{},
		   steps:[],
		   contactMobile:'',
		   
		   goodsList:[],
		};
	},
	async onLoad(options) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
		await this.$onLaunched;
		commonData().then((res)=>{
			this.contactMobile = res.contactMobile
		})
		this.getGoodsList()
	},
	
	async onShow() {
		await this.$onLaunched;
			store.dispatch('userInfo').then(()=>{
				this.storeUserInfo = store.state.userInfo;
				dataStatistics().then((res)=>{
					this.msgNum = res.msgNum
					this.inquiryWaitPriceNum = res.inquiryWaitPriceNum
					this.inquiryPriceIngNum = res.inquiryPriceIngNum
					
				})
						this.$nextTick(()=>{
							getGuideDataAPI({
								pageUrl:'userCenter'
							}).then((res)=>{
								this.steps=res
								this.$refs.driverPage.showPop(this.steps)
							}).catch((error)=>{
								console.log(error)
							})
						})
			})
			customerService().then((res)=>{
			     this.kfinfo = res
			})
			// #ifdef H5
			pageSeo({pageType: 'indexPage'}).then((res)=>{
				document.title = res.pageTitle;
			})
			// #endif
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	watch:{
		userInfo: function (e) {
			     // console.log(e)
				this.storeUserInfo = store.state.userInfo;  
			},
	},
	computed:{
		...mapState(['userInfo','quotationNum'])
	},
    methods: {
		toNewPage(url){
			console.log(url)
			uni.navigateTo({
				url: url
			})
		},
		toInfo(item){
			uni.navigateTo({
				url: '/pagesCommon/goodsInfo?goodsId='+item.goodsId
			})
		},
		getGoodsList(){
			let data = {};
			data.pageNum =  1
			data.pageSize =  10
			pcGoodsList(data).then((res)=>{
				this.goodsList = res.list
			})
		},
		callPhone1(){
			uni.makePhoneCall({
				phoneNumber:  '400-675-8606'
			});
		},
		callPhone(){
			uni.makePhoneCall({
				phoneNumber:  this.contactMobile
			});
		},
		showKF(){
			this.show = true
		},
		
		callKF() {
		  uni.makePhoneCall({
		    phoneNumber: this.kfinfo.adminMobile,
		  })
		},
		
		//切换店铺
		changeStore(item){
			setDefaultStore({storeId:item.storeId}).then(()=>{
				store.dispatch('userInfo').then(()=>{
					this.storeUserInfo = store.state.userInfo;
				})
			})
		},
		
		//显示店铺选择
		showChooseDP(){
			this.$refs.storeChoose.init(this.storeUserInfo.storeId);
		},
		
	  onJump(url,type) {
		  if(type == 'no'){
			  uni.navigateTo({
				url: url
			  })
		  }else{
			  this.judgeLogin(() => {
				  uni.navigateTo({
					url: url
				  })
			  })
		  }
		 
	  },
	  
	  onSheller(url,key){
		  this.judgeLogin(() => {
			  this.judgeSellerAuth(()=>{
				  if(this.storeUserInfo.permissions.indexOf(key) != -1){
					 uni.navigateTo({
					   url: url
					 }) 
				  }else{
					   uni.$u.toast("您的权限不够！");
				  }
			  }) 
		  })
	  },

    }
  }
</script>

<style lang="scss" scoped>
	@import '@/style/common.scss';
	.index-block{
		margin-top:38rpx;
		background: rgba(255,255,255,1);
		box-shadow: 0px 0px 10rpx rgba(0,0,0,0.06);
		border-radius: 18rpx;
		padding:24rpx;
		.indexPage-block-title{
			font-size: 28rpx;
			font-weight: bold;
			line-height: 32rpx;
			color: #000000;
			@include flexbox(space-between,center);
			.price-left,.more-span{
				@include flexbox(flex-start,center);
			}
			.more-span{
				cursor: pointer;
				color: #ff5902;
				font-weight: 400;
				font-size: 24rpx;
				flex:none
			}
		}
		.goods-list{
			.goods-item{
				margin-top:40rpx;
				.goods-top{
					@include flexbox(space-between,center);
					.goods-name{
						font-size: 24rpx;
						color: #000000;
						padding-right:40rpx;
						@include textoverflow(1)
					}
					.goods-price{
						font-size: 24rpx;
						color: #FF5902;
					}
				}
				.goods-attar{
					font-size: 22rpx;
					color: #8B8B8B;
					margin-top:10rpx;
				}
			}
		}
	}
	
	.user-page{
		padding:0 32rpx;
		padding-bottom:80rpx;
		.user-info{
			padding-top:32rpx;
			@include flexbox(flex-start,center);
			.user-img{
				width: 120rpx;
				height: 120rpx;
				border: 7rpx solid #E3ECFF;
				border-radius: 50%;
				.img{
					width:100%;
					height:100%;
					border-radius: 50%;
				}
			}
			.user-text{
				padding-left:32rpx;
				position: relative;
				flex:1;
				.big-text{
					font-size: 38rpx;
					font-weight: bold;
					line-height: 54rpx;
					color: #000000;
					
				}
				.ty-div{
					display: inline-block;
					font-size: 22rpx;
					line-height: 30rpx;
					color: #747474;
					@include flexbox(flex-start,center);
					padding:4rpx 10rpx;
					border: 1px solid #FFE8B3;
					border-radius: 20rpx;
					margin-top:10rpx;
					background: #fff;
				}
				.small-text{
					color: #747474;
					font-size:22rpx;
					margin-top:10rpx;
				}
				.msg-div{
					float:right;
					position: relative;
					padding-right:24rpx;
					.num-div{
						background: rgba(255,0,0,1);
						border-radius: 12rpx;
						font-size:20rpx;
						color:#fff;
						padding:0 10rpx;
						text-align: center;
						position: absolute;
						line-height: 28rpx;
						font-weight: 400;
						right: 0;
						top:-10rpx;
					}
				}
			}
		}
		.user-inquiry{
			margin:40rpx 0;
			border-radius: 18rpx;
			padding:32rpx 0;	
			background: url('https://pic.moresu.com/Fm4eI31hWViPT-v1LPJYauifsGo5') no-repeat;
			background-size:cover;
			box-shadow: 0px 10rpx 15rpx rgba(0,17,52,0.15);
			.inquiry-top{
				@include flexbox(space-between,center);
				.link-btn{
					@include flexbox(flex-end,center);
					flex:none;
					background: rgba(255,255,255,0.39);
					border-radius: 25rpx 0px 0px 25rpx;
					width: 184rpx;
					height: 45rpx;
					font-size: 24rpx;
					color: #002671;
					line-height: 45rpx;
					text-align: right;
					padding-right:16rpx;
					cursor: pointer;
				}
			}
			.inquiry-row{
				padding:64rpx 32rpx 0rpx 32rpx;
				@include flexbox(space-between,center);
				.inquiry-col{
					width:110rpx;
					text-align: center;
					cursor: pointer;
					position: relative;
					.img{
						width:50rpx;
						height:50rpx;
						display: inline-block;
					}
					.text{
						color: #fff;
						font-size:26rpx;
						margin-top:10rpx
					}
					.label{
						position: absolute;
						padding:0 8rpx;
						line-height: 24rpx;
						background: #ff0000;
						border-radius: 12rpx;
						font-size:20rpx;
						color:#fff;
						text-align: center;
						right: 20rpx;
						top: -10rpx;
					}
				}
			}
		}
		.user-item-row{
			@include flexbox(space-around,center);
			.item-col{
				width:110rpx;
				text-align: center;
				cursor: pointer;
				.img{
					width:88rpx;
					height:88rpx;
					box-shadow: 0px 0px 17rpx rgba(0,80,151,0.06);
					border-radius: 30rpx;
					display: inline-block;
				}
				.text{
					color: #070D14;
					font-size:26rpx;
				}
			}
		}
		.user-seller-div{
			background: #fff;
			box-shadow: 0px 0px 15rpx rgba(0,17,52,0.15);
			border-radius: 18rpx;
			margin-top:38rpx;
			padding:32rpx;
			.seller-top{
				@include flexbox(space-between,center);
				.seller-title{
					font-size: 36rpx;
					font-weight: bold;
					line-height: 50rpx;
					color: #000000;
				}
				.seller-lable{
					background: linear-gradient(180deg, #39AFFF 0%, #609AFF 100%);
					border-radius: 22rpx;
					color:#fff;
					font-size: 20rpx;
					padding:8rpx 10rpx;
					@include flexbox(flex-start,center);
					flex:none;
					margin-left:20rpx;
				}
			}
			.cy-row.seller-row{
				margin-top:0rpx;
				.seller-col{
					margin-top:20rpx;
				}
			}
			.seller-row{
				margin-top:20rpx;
				@include flexbox(flex-start,center);
				flex-wrap:wrap;
				.seller-col{
					width:25%;
					text-align: center;
					cursor: pointer;
					position: relative;
					.img-div{
						width:100%;
						height:80rpx;
						@include flexbox(center,center);
					}
					.img{
						width:50rpx;
						height:50rpx;
						display: inline-block;
					}
					.text{
						color: #070D14;
						font-size:24rpx;
					}
					.label{
						position: absolute;
						padding:0 8rpx;
						line-height: 24rpx;
						background: #ff0000;
						border-radius: 12rpx;
						font-size:20rpx;
						color:#fff;
						text-align: center;
						right: 50rpx;
						top: 0rpx;
					}
				}
				
			}
		}
		.share-div{
			margin-top:38rpx;
			position: relative;
			box-shadow: 0px 0px 13px rgba(0,17,52,0.09);
			.share-btn{
				width: 158rpx;
				height: 56rpx;
				background: linear-gradient(180deg, #FFFFFF 0%, #FFF5E6 100%);
				box-shadow: 0px 3rpx 6rpx rgba(255,79,0,0.31);
				border-radius: 30rpx;
				text-align: center;
				line-height: 56rpx;
				font-size:26rpx;
				color: #FF6F00;
				position: absolute;
				top:50%;
				margin-top:-28rpx;
				right:32rpx;
			}
		}
	
	     .about-div{
	     	background: #fff;
	     	box-shadow: 0px 0px 15rpx rgba(0,17,52,0.15);
	     	border-radius: 18rpx;
	     	margin-top:38rpx;
		
			}
			
	}
	.kfdiv{
		width: 596rpx;
		height: 680rpx;
		background: url('https://pic.moresu.com/FqjISbQFrAk0sxRuYX6aMyZDnwvZ') no-repeat ;
		background-size: cover;
		opacity: 1;
		border-radius: 26rpx;
		.kfrwm{
			width: 348rpx;
			height: 348rpx;
			background: rgb(255,255,255);
			border: 2px solid #FF5E01;
			margin:100rpx auto 40rpx auto;
			@include flexbox(center,center);
		}
		.kfinfo{
			font-size: 30rpx;
			line-height: 50rpx;
			color: #070D14;
			padding:0 40rpx;
			.label{
				color: #929292;
				display: inline-block;
				vertical-align: middle;
			}
			.text{
				display: inline-block;
				vertical-align: middle;
			}
		}
	}
</style>